<!DOCTYPE html>
<!-- saved from url=(0053)http://www.swiper.com.cn/demo/progressShow/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Progress演示，志玲姐姐 - swiper中文网</title>
<meta name="viewport" content="initial-scale=1">
<!--<link rel="stylesheet" href="../../dist/css/swiper.min.css">
<script src="../../dist/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="css/swiper.min(2).css">
<script src="js/swiper.min.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}
html,body,.swiper-container,.swiper-slide{
	height:100%;
}
.swiper-slide {
	  overflow:hidden;
}
.swiper-slide img{
	width:100%;
	height:100%;
}
</style>
</head>
<body>
<div style="max-width:640px; margin:0 auto; height:100%;">
<div class="swiper-container swiper-container-vertical">
  <div class="swiper-wrapper">
  <div class="swiper-slide swiper-slide-active" style="height: 480px;"><img src="img/zhiling1.jpg"></div>
    <div class="swiper-slide swiper-slide-next" style="height: 480px;"><img src="img/zhiling2.jpg"></div>
    <div class="swiper-slide" style="height: 480px;"><img src="img/zhiling3.jpg"></div>
    <div class="swiper-slide" style="height: 480px;"><img src="img/zhiling4.jpg"></div>

  </div>
</div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
	mousewheel: true,
	watchSlidesProgress: true,
	on:{
	  init: function() {
		this.myIndex = 0;//activeIndex在滑动到一半时会切换，改用滑动完再切换的myIndex
	  },
	  progress: function() {
		for (var i = 0; i < this.slides.length; i++) {
			var slide=this.slides.eq(i);
			var progress = this.slides[i].progress;
			var translate, boxShadow;
			translate = progress * this.height * 0.8;
			scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
			if (i == this.myIndex) {
				slide.transform('translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')');
				slide.css({'z-index':0,'boxShadow':'0px 0px 10px rgba(0,0,0,.5)'});
			}
		}
	},
	transitionEnd: function() {
		this.myIndex = this.activeIndex;
		for (var i = 0; i < this.slides.length; i++) {
		var slide=this.slides.eq(i);
		slide.transform('');
		slide.css('z-index',1);
		}
		this.mousewheel.enable();
	},
	setTransition: function(speed) {
		for (var i = 0; i < this.slides.length; i++) {
			var slide=this.slides.eq(i);
			slide.transition(speed + 'ms');
		}
		this.mousewheel.disable();
	}
	}
});
</script>


</body></html>